<template>
<div>

  <div style="width: 1400px;margin: auto">
    <div style="margin-left: 55px">
    共找到相关结果<font color="red">{{total}}</font>个<br>
    <font size="5">相关主播</font> <el-button :type="type1" round @click="all()">全部</el-button> <el-button round :type="type2" @click="zhibo()">直播中</el-button>
    </div>
  <el-row>
    <el-col :span="10" v-for="(o, index) in listAnchor" :key="index" :offset="index > 0 ? 1 : 1" style="width: 200px;height: 300px;margin-top: 30px">
      <el-card :body-style="{ padding: '20px' }">
        <div style="cursor: pointer" @click="zhubo(o.aId)">
        <img :src="o.aPic" style="border-radius:50%" class="image2">
        <div style="padding: 0px;font-size: 20px"align="center">
          <span v-html="o.aName" ></span><br>
          <span v-html="o.atName"></span><br>
          <i class="el-icon-star-off"style="color: orange" ></i><span>{{o.aGuanzhu}}</span><br>
          <span>{{o.chenghao}}</span>
        </div>
        </div>
      </el-card>
    </el-col>
  </el-row>

  </div>
</div>
</template>

<script>
import axios from 'axios'
export default {
  name: "show",
  data(){
    return{
      listAnchor:[],
      startAnchor:[],
      alllistAnchor:[],
      type1:'',
      type2:'',
      total:'',
    }
  },
  methods:{
    zhibo(){
      this.startAnchor=[];
      this.type1="",
      this.type2="danger";
      for(var i=0;i<this.listAnchor.length;i++){
        if(this.listAnchor[i].aStatus==0){
          this.startAnchor.push(this.listAnchor[i]);
        }
      }
      this.listAnchor=this.startAnchor;
      this.total=this.listAnchor.length;
    },
    all(){
       this.type2="",
        this.type1="danger";
       this.listAnchor=this.alllistAnchor;
       this.total=this.listAnchor.length;
    },
    likeAnchor(){
      axios.post("http://localhost:7000/live-search/search/likeAnchor",{
        word:this.word,
        num:0
      }).then(res=>{
        if(res.data.code==200){
           this.listAnchor=res.data.data;
           this.alllistAnchor=this.listAnchor;
           this.total=res.data.total;
        }
      })
    },
    zhubo(id){
      this.$router.push({name:'zhibo',query:{aId:id}})
    }
  },
  mounted() {
      this.type1="danger"
      this.word=this.$route.params.word;
      this.likeAnchor();
  }
}
</script>
<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 50px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image2 {
  width: 150px;
  margin: auto;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>

<style scoped>

</style>
